<template>
  <div id="message-box" v-show="flag" @click="closeClick">
      <div class="wrap">
          <div class="messageAlert">
              <div class="attention fixClear">
                  <span class="word">提示</span>
                  <span class="close" @click="closeClick">X</span>
              </div>
              <div class="info"><span class="amazing">!</span><span class="select">此操作将永远删除该文件，是否继续？</span></div>
            <div class="selectBox">
                <button class="cancel" @click="closeClick">取消</button>
                <button class="sure" @click="sureClick">确定</button>
            </div>
          </div>
      </div>
  </div>
</template>

<script>
  export default {
    name: 'MassageBox',
    props: {
        flag: {
            type: Boolean,
            default: false
        },
        isActive: {
            type: Boolean,
            default: false
        },
        isSuccess: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
            cflag: this.flag,
            cisActive: this.isActive,
            cisSuccess: this.isSuccess
        }
    },
    methods: {
        closeClick() {
            this.cflag = !this.cflag;
            this.cisActive = !this.cisActive;
            this.$emit('closeBox',{cflag: this.cflag,cisActive: this.cisActive});
            // console.log({cflag: this.cflag,cisActive: this.cisActive});
        },
        sureClick() {
            this.cflag = !this.cflag;
            this.cisSuccess = !this.cisSuccess;
            this.$emit('surebox',{cflag: this.cflag,cisSuccess: this.cisSuccess});
        }
    }
  }
</script>

<style>
    @import '../assets/css/common.css';
    #message-box{
        height: 100%;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        background-color: rgba(0, 0, 0, 0.4);
    }
    .wrap{
        position: fixed;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);
    }
    .messageAlert{
        width: 410px;
        height: 135px;
        padding: 0 0 10px 0;
        background-color: #fff;
        border-radius: 4px;
        border: 1px solid #ebeef5;
    }
    .attention{
        padding: 15px 15px 10px;
    }
    .word{
        float: left;
    }
    .close{
        float: right;
        cursor: pointer;
    }
    .info{
        padding: 10px 15px;
    }
    .amazing{
        display: inline-block;
        width: 20px;
        height: 20px;
        text-align: center;
        background-color: yellow;
        border-radius: 50%;
    }
    .select{
        margin-left: 10px;
    }
    .selectBox{
        text-align: right;
        padding: 5px 15px 0px;
    }
    .cancel, .sure{
        border: none;
        padding: 9px 15px;
        font-size: 12px;
        border-radius: 3px;
        cursor: pointer;
    }
    .cancel{
        background: #fff;
        border: 1px solid #dcdfe6;
        color: #606266;
    }
    .sure{
        color: #fff;
        background-color: #409eff;
        margin-left: 10px;
    }
</style>